<template>
  <div class="call-live">
    <video ref="live_video_ref" autoPlay playsInline muted :controls="false"></video>
    <audio ref="live_audio_ref" autoPlay muted :controls="false"></audio>
  </div>
</template>
<script>
export default {
  name: 'CallLive',
  data() {
    return {
      peerId: ''
    }
  },
  methods: {
    handleUpdateLive(nval) {
      console.log()
      if (!this.peerId)  {
        let keys = Object.keys(nval)
        this.peerId = keys[0]
      } else {
        let arr = nval[this.peerId]
        arr.forEach(element => {
          let kind = element.track.kind
          switch(kind) {
            case 'video':
              this.handleCreateVideo(element)
              break
            case 'audio':
              this.handleCreateAudio(element);
              break;    
          }
        });
      }
    },
    handleCreateVideo(data) {
      const track = data.track
      const stream = new MediaStream
      const elVideo = this.$refs.live_video_ref
      stream.addTrack(track)
      elVideo.srcObject = stream
      elVideo.play()

    },
    handleCreateAudio(data) {
      const track = data.track
      const stream = new MediaStream
      const audioEl = this.$refs.live_audio_ref
      stream.addTrack(track)
      audioEl.srcObject = stream
      audioEl.play()
    }
  },
  watch: {
    "$store.state.consumers": {
      handler(nval, oval) {
        this.handleUpdateLive(nval)
      },
      deep: true
    }
  }
}
</script>